feat(Tabs): support showSearch in more dropdown#992
Conversation
|
Someone is attempting to deploy a commit to the React Component Team on Vercel. A member of the Team first needs to authorize it. |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
Walkthrough新增 Changes搜索下拉支持
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a search feature within the tabs overflow dropdown, allowing users to filter tabs. It includes documentation, styling, a demo, and unit tests. The review feedback highlights three key areas for improvement: first, safely extracting text from tab.label since it can be a React node rather than a plain string; second, resetting the selected key when the active tab is filtered out to prevent selecting hidden tabs; and third, enhancing accessibility by auto-focusing the search input upon opening and supporting the Escape key to close the dropdown.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| const filteredTabs = mergedSearchValue | ||
| ? tabs.filter(tab => String(tab.label).toLowerCase().includes(mergedSearchValue.toLowerCase())) | ||
| : tabs; |
There was a problem hiding this comment.
在 rc-tabs 中，tab.label 的类型是 React.ReactNode。如果用户传入了非字符串的 React 节点（例如包含图标或 HTML 标签的 <span>Tab 1</span>），直接使用 String(tab.label) 会得到 "[object Object]"，导致搜索过滤失效，甚至在搜索 "object" 时错误地匹配到所有这类 Tab。
建议实现一个简单的文本提取函数，或者在过滤时安全地处理非字符串类型的 label。
const getLabelText = (node: React.ReactNode): string => {
if (!node) return '';
if (typeof node === 'string' || typeof node === 'number') {
return String(node);
}
if (React.isValidElement(node) && node.props && 'children' in node.props) {
return getLabelText(node.props.children);
}
if (Array.isArray(node)) {
return node.map(getLabelText).join('');
}
return '';
};
const filteredTabs = mergedSearchValue
? tabs.filter(tab => getLabelText(tab.label).toLowerCase().includes(mergedSearchValue.toLowerCase()))
: tabs;
| useEffect(() => { | ||
| if (!open) { | ||
| if (open) { | ||
| // 打开时，默认选中当前 activeKey 对应的 tab | ||
| if (!selectedKey && activeKey) { | ||
| setSelectedKey(activeKey); | ||
| } | ||
| } else { | ||
| setSelectedKey(null); | ||
| if (autoClearSearchValue && controlledSearchValue === undefined) { | ||
| setSearchValue(''); | ||
| } | ||
| } | ||
| }, [open]); | ||
| }, [open, activeKey]); |
There was a problem hiding this comment.
当启用搜索并输入关键字过滤 Tab 时，如果当前选中的 selectedKey 被过滤掉了（不再显示在列表中），按下 Enter 键仍然会触发 onTabClick(selectedKey)，导致选中了一个已被隐藏的 Tab。此外，键盘上下键导航也会从一个不可见的项开始，导致体验不佳。
建议在 filteredTabs 变化时，如果当前的 selectedKey 不在过滤后的可见列表中，自动将 selectedKey 重置为过滤后列表中的第一个有效项。
useEffect(() => {
if (open) {
// 打开时，默认选中当前 activeKey 对应的 tab
if (!selectedKey && activeKey) {
setSelectedKey(activeKey);
}
} else {
setSelectedKey(null);
if (autoClearSearchValue && controlledSearchValue === undefined) {
setSearchValue('');
}
}
}, [open, activeKey]);
useEffect(() => {
if (open && isSearchable) {
const enabledTabs = filteredTabs.filter(tab => !tab.disabled);
if (enabledTabs.length > 0 && !enabledTabs.some(tab => tab.key === selectedKey)) {
setSelectedKey(enabledTabs[0].key);
} else if (enabledTabs.length === 0) {
setSelectedKey(null);
}
}
}, [open, filteredTabs, isSearchable, selectedKey]);
| const searchInput = isSearchable ? ( | ||
| <div className={`${dropdownPrefix}-search`}> | ||
| <input | ||
| type="text" | ||
| placeholder={placeholder} | ||
| value={mergedSearchValue} | ||
| onChange={e => { | ||
| const value = e.target.value; | ||
| setSearchValueFn(value); | ||
| onSearch?.(value); | ||
| }} | ||
| onKeyDown={e => { | ||
| if (e.key === 'ArrowDown') { | ||
| e.preventDefault(); | ||
| selectOffset(1); | ||
| } else if (e.key === 'ArrowUp') { | ||
| e.preventDefault(); | ||
| selectOffset(-1); | ||
| } else if (e.key === 'Enter' && selectedKey) { | ||
| e.preventDefault(); | ||
| onTabClick(selectedKey, e); | ||
| setOpen(false); | ||
| } | ||
| }} | ||
| onClick={e => e.stopPropagation()} | ||
| /> | ||
| </div> | ||
| ) : null; |
There was a problem hiding this comment.
为了提升用户体验和无障碍支持（Accessibility），建议在搜索框中加入以下改进：
- 自动聚焦（Auto-focus）：当下拉菜单打开且启用了搜索时，搜索输入框应该自动获得焦点，方便用户直接开始输入。
- 支持 Esc 键关闭：在输入框中按下
Esc键时，应该能够关闭下拉菜单。
const searchInput = isSearchable ? (
<div className={`${dropdownPrefix}-search`}>
<input
ref={node => {
if (node && open && document.activeElement !== node) {
setTimeout(() => node.focus(), 0);
}
}}
type="text"
placeholder={placeholder}
value={mergedSearchValue}
onChange={e => {
const value = e.target.value;
setSearchValueFn(value);
onSearch?.(value);
}}
onKeyDown={e => {
if (e.key === 'ArrowDown') {
e.preventDefault();
selectOffset(1);
} else if (e.key === 'ArrowUp') {
e.preventDefault();
selectOffset(-1);
} else if (e.key === 'Escape') {
e.preventDefault();
setOpen(false);
} else if (e.key === 'Enter' && selectedKey) {
e.preventDefault();
onTabClick(selectedKey, e);
setOpen(false);
}
}}
onClick={e => e.stopPropagation()}
/>
</div>
) : null;
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #992 +/- ##
==========================================
+ Coverage 98.98% 99.03% +0.04%
==========================================
Files 18 18
Lines 787 827 +40
Branches 232 256 +24
==========================================
+ Hits 779 819 +40
Misses 8 8 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (1)
tests/overflow.test.tsx (1)
675-746: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win建议把回归测试补到关闭清空和键盘导航。
Line 675-746 目前只覆盖了输入渲染、筛选和
onSearch。这次改动里更容易回归的是默认autoClearSearchValue=true的关闭清空，以及ArrowUp/ArrowDown/Enter的键盘选择流程，建议顺手补上这两类断言。🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@tests/overflow.test.tsx` around lines 675 - 746, Current tests in overflow.test.tsx only cover rendering, filtering, and onSearch in the search dropdown; add regression coverage for the default autoClearSearchValue=true behavior and the keyboard navigation/selection flow. Extend the existing overflow dropdown tests around getTabs, showSearch, and the rc-tabs-dropdown input to assert that the search value clears appropriately after selection when autoClearSearchValue is enabled. Also add key event coverage for ArrowUp, ArrowDown, and Enter to verify the dropdown item focus and selection path does not regress.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/examples/search-dropdown.tsx`:
- Around line 53-56: Search-dropdown 示例里的 Tabs 被固定为 activeKey="1" 且 onChange
被忽略，导致点击搜索结果切换标签无效；请在 search-dropdown.tsx 中为 Tabs 单独维护一个 activeKey 状态，并在
onChange 里更新它，让受控的 searchValue 与 tab 切换状态分离，保持示例可正常切换。
In `@README.md`:
- Around line 121-132: The new `more` / `MoreProps` API table entries in the
README are written in Chinese while the rest of the document is English; update
these descriptions to English to keep the public documentation language
consistent. Please revise the `MoreProps` section and its nested fields (`icon`,
`showSearch`, `placeholder`, `searchValue`, `onSearch`, `autoClearSearchValue`)
so the wording matches the surrounding README style.
In `@src/TabNavList/OperationNode.tsx`:
- Around line 145-147: `OperationNode` needs to keep `selectedKey` in sync with
the current `filteredTabs` result set. Update the selection logic around
`enabledTabs`, the Enter handler, and the `open`/`filteredTabs` effect so
`selectedKey` is always coerced to a valid key in the visible tabs (prefer
current `activeKey`, otherwise the first enabled tab, otherwise `null`). Also
fix the `findIndex(...) || 0` fallback in `OperationNode` so a missing match
does not preserve an invalid index, preventing keyboard confirm and highlight
from pointing at hidden tabs.
- Around line 80-82: The search filtering in OperationNode should not rely on
String(tab.label), because ReactNode labels can stringify to “[object Object]”
and fail in the “more” search. Update the filtering logic around filteredTabs to
use visible text derived from the tab label, or add a configurable filter text
source, so tabs with element labels still match correctly. Keep the fix
localized to the tab filtering path and preserve the existing Tabs API behavior.
---
Nitpick comments:
In `@tests/overflow.test.tsx`:
- Around line 675-746: Current tests in overflow.test.tsx only cover rendering,
filtering, and onSearch in the search dropdown; add regression coverage for the
default autoClearSearchValue=true behavior and the keyboard navigation/selection
flow. Extend the existing overflow dropdown tests around getTabs, showSearch,
and the rc-tabs-dropdown input to assert that the search value clears
appropriately after selection when autoClearSearchValue is enabled. Also add key
event coverage for ArrowUp, ArrowDown, and Enter to verify the dropdown item
focus and selection path does not regress.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: edab3f81-7197-4ef8-9dd1-712eb57eb981
📒 Files selected for processing (7)
README.mdassets/dropdown.lessdocs/demo/search-dropdown.mddocs/examples/search-dropdown.tsxsrc/TabNavList/OperationNode.tsxsrc/interface.tstests/overflow.test.tsx
| <Tabs | ||
| activeKey="1" | ||
| onChange={() => {}} | ||
| items={items} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
让受控搜索示例保持可切换标签。
Line 54-55 把 Tabs 固定在 activeKey="1" 且忽略 onChange，所以从搜索结果点选其他 tab 时示例不会切换内容。这里演示的是受控 searchValue，不是受控 tab 状态，建议单独维护一个 activeKey。
建议修改
const ControlledDemo = ({ items }: { items: any[] }) => {
+ const [activeKey, setActiveKey] = useState('1');
const [searchValue, setSearchValue] = useState('');
return (
<Tabs
- activeKey="1"
- onChange={() => {}}
+ activeKey={activeKey}
+ onChange={setActiveKey}
items={items}
more={{
showSearch: {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Tabs | |
| activeKey="1" | |
| onChange={() => {}} | |
| items={items} | |
| const ControlledDemo = ({ items }: { items: any[] }) => { | |
| const [activeKey, setActiveKey] = useState('1'); | |
| const [searchValue, setSearchValue] = useState(''); | |
| return ( | |
| <Tabs | |
| activeKey={activeKey} | |
| onChange={setActiveKey} | |
| items={items} |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/examples/search-dropdown.tsx` around lines 53 - 56, Search-dropdown 示例里的
Tabs 被固定为 activeKey="1" 且 onChange 被忽略，导致点击搜索结果切换标签无效；请在 search-dropdown.tsx 中为
Tabs 单独维护一个 activeKey 状态，并在 onChange 里更新它，让受控的 searchValue 与 tab
切换状态分离，保持示例可正常切换。
| | more | MoreProps | - | dropdown 配置，透传 `@rc-component/dropdown` 的属性 | | ||
|
|
||
| ### MoreProps | ||
|
|
||
| | name | type | default | description | | ||
| | ---------------------- | --------------------------- | ---------- | ------------------------ | | ||
| | icon | ReactNode | - | 自定义更多按钮图标 | | ||
| | showSearch | boolean \| ShowSearchConfig | - | 是否显示搜索框 | | ||
| | - placeholder | string | `'Search'` | 搜索框占位文字 | | ||
| | - searchValue | string | - | 搜索框的值（受控模式） | | ||
| | - onSearch | (value: string) => void | - | 搜索值变化回调 | | ||
| | - autoClearSearchValue | boolean | `true` | 关闭时是否自动清空搜索值 | |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
README 这里请保持英文文档一致性。
Line 121 到 Line 132 新增的 more / MoreProps 描述切成了中文，但这个 README 其余部分仍是英文。公开文档在 API 表格里突然切换语言会影响 npm / GitHub 读者阅读，建议统一翻成英文后再合入。
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@README.md` around lines 121 - 132, The new `more` / `MoreProps` API table
entries in the README are written in Chinese while the rest of the document is
English; update these descriptions to English to keep the public documentation
language consistent. Please revise the `MoreProps` section and its nested fields
(`icon`, `showSearch`, `placeholder`, `searchValue`, `onSearch`,
`autoClearSearchValue`) so the wording matches the surrounding README style.
| const filteredTabs = mergedSearchValue | ||
| ? tabs.filter(tab => String(tab.label).toLowerCase().includes(mergedSearchValue.toLowerCase())) | ||
| : tabs; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift
不要用 String(tab.label) 作为搜索源。
Line 81 这里把 label 直接转成字符串，遇到 ReactNode 会变成 "[object Object]"。Tabs 的公开用法本身就允许元素标签，README.md Line 63 和 Line 70 也是 <p>...</p>，所以这会让带样式的标签在 “more” 搜索里完全搜不到。这里需要提取可见文本，或者提供可配置的 filter text，而不是依赖 String(...)。
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/TabNavList/OperationNode.tsx` around lines 80 - 82, The search filtering
in OperationNode should not rely on String(tab.label), because ReactNode labels
can stringify to “[object Object]” and fail in the “more” search. Update the
filtering logic around filteredTabs to use visible text derived from the tab
label, or add a configurable filter text source, so tabs with element labels
still match correctly. Keep the fix localized to the tab filtering path and
preserve the existing Tabs API behavior.
| // 键盘导航只在过滤后的 tabs 上生效 | ||
| const enabledTabs = filteredTabs.filter(tab => !tab.disabled); | ||
| let selectedIndex = enabledTabs.findIndex(tab => tab.key === selectedKey) || 0; |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
过滤结果变化后要同步 selectedKey。
Line 236 会在打开时无条件把 activeKey 设为 selectedKey，但 OperationNode 接到的是隐藏 tab 列表，activeKey 很可能根本不在当前结果集里。之后 Line 213 到 Line 216 的 Enter 分支仍会按这个过期 key 触发 onTabClick，而且 Line 147 的 findIndex(...) || 0 也不会兜底，因为 -1 在 JS 里是真值。结果就是：过滤把当前项排除后，键盘确认和高亮都可能落到一个根本没渲染的项上。建议在 open 或 filteredTabs 变化时，把 selectedKey 收敛到当前结果集里的 activeKey / 第一个未禁用项 / null。
Also applies to: 206-217, 233-245
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/TabNavList/OperationNode.tsx` around lines 145 - 147, `OperationNode`
needs to keep `selectedKey` in sync with the current `filteredTabs` result set.
Update the selection logic around `enabledTabs`, the Enter handler, and the
`open`/`filteredTabs` effect so `selectedKey` is always coerced to a valid key
in the visible tabs (prefer current `activeKey`, otherwise the first enabled
tab, otherwise `null`). Also fix the `findIndex(...) || 0` fallback in
`OperationNode` so a missing match does not preserve an invalid index,
preventing keyboard confirm and highlight from pointing at hidden tabs.
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
tests/overflow.test.tsx (1)
676-740: 🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win请把 fake timers 的恢复放进
try/finally或统一的 teardown。现在只有走到测试末尾才会执行
jest.useRealTimers()；中间任一断言失败都会把 fake timers 泄漏到后续用例，造成串扰和偶发失败。可参考的改法
it('should have input and support keyboard navigation', () => { - jest.useFakeTimers(); - const onChange = jest.fn(); - const { container } = render( - getTabs({ - onChange, - ... - }), - ); - - ... - - jest.useRealTimers(); + jest.useFakeTimers(); + try { + const onChange = jest.fn(); + const { container } = render( + getTabs({ + onChange, + ... + }), + ); + + ... + } finally { + jest.useRealTimers(); + } });Also applies to: 744-781
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@tests/overflow.test.tsx` around lines 676 - 740, Wrap the fake-timer setup in this test around the existing overflow dropdown flow with a try/finally (or move cleanup into a shared teardown) so `jest.useRealTimers()` always runs even if an assertion fails. Use the current test block in `tests/overflow.test.tsx` that calls `jest.useFakeTimers()`, `triggerResize`, and `fireEvent` interactions, and ensure the cleanup is tied to the test’s execution rather than the final line only to prevent timer leakage into later cases.
🧹 Nitpick comments (1)
tests/overflow.test.tsx (1)
675-742: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win建议补一条“关闭下拉后清空搜索值”的用例。
这次改动的核心行为之一就是关闭时重置搜索值，而当前新增用例还没有锁住这个默认契约；后续如果回归，现有测试捕不到。至少补一条关闭后再打开应为空的断言，最好再覆盖
autoClearSearchValue: false。Also applies to: 743-781
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@tests/overflow.test.tsx` around lines 675 - 742, 现有新增用例只覆盖了搜索和键盘选择，没有验证关闭下拉后搜索值会被重置这一关键行为。请在相关测试中围绕 getTabs、showSearch 和下拉触发流程补充断言：关闭 Dropdown 后再次打开时 input 应为空，并最好再补一个 autoClearSearchValue 为 false 时不会清空的分支，确保默认契约被锁定。
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@tests/overflow.test.tsx`:
- Around line 676-740: Wrap the fake-timer setup in this test around the
existing overflow dropdown flow with a try/finally (or move cleanup into a
shared teardown) so `jest.useRealTimers()` always runs even if an assertion
fails. Use the current test block in `tests/overflow.test.tsx` that calls
`jest.useFakeTimers()`, `triggerResize`, and `fireEvent` interactions, and
ensure the cleanup is tied to the test’s execution rather than the final line
only to prevent timer leakage into later cases.
---
Nitpick comments:
In `@tests/overflow.test.tsx`:
- Around line 675-742: 现有新增用例只覆盖了搜索和键盘选择，没有验证关闭下拉后搜索值会被重置这一关键行为。请在相关测试中围绕
getTabs、showSearch 和下拉触发流程补充断言：关闭 Dropdown 后再次打开时 input 应为空，并最好再补一个
autoClearSearchValue 为 false 时不会清空的分支，确保默认契约被锁定。
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 1c3ccb13-0aec-4d33-9020-79badd0aa09f
📒 Files selected for processing (1)
tests/overflow.test.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@tests/overflow.test.tsx`:
- Around line 740-751: The “close and reopen” test is using Escape on the search
input, but OperationNode’s input onKeyDown does not handle that path; the real
close action is on the .rc-tabs-nav-more trigger. Update the
autoClearSearchValue: false test to close the dropdown by interacting with the
more button in TabNavList/OperationNode, then reopen it and assert the input
still contains the search value. Use the existing OperationNode dropdown and
input selectors so the test covers the actual close/reopen flow instead of
reusing the same open input.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: f7df2792-f8ec-4b79-bd5f-ec560fa11c20
📒 Files selected for processing (1)
tests/overflow.test.tsx
| // 关闭下拉再打开，验证 autoClearSearchValue: false 时搜索值保留 | ||
| fireEvent.keyDown(input, { key: 'Escape' }); | ||
| act(() => { | ||
| jest.runAllTimers(); | ||
| }); | ||
| fireEvent.mouseEnter(container.querySelector('.rc-tabs-nav-more')); | ||
| act(() => { | ||
| jest.runAllTimers(); | ||
| }); | ||
| const input2 = document.querySelector('.rc-tabs-dropdown input') as HTMLInputElement; | ||
| expect(input2.value).toEqual('u'); | ||
|
|
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
这里没有真正覆盖“关闭后再打开”的路径。
Line 741 把 Escape 发给了搜索框，但 src/TabNavList/OperationNode.tsx:194-218 的 input onKeyDown 并不处理 Escape；真正的关闭逻辑在 src/TabNavList/OperationNode.tsx:162-191 的 .rc-tabs-nav-more 上。这样断言很可能是在下拉未关闭的情况下直接复用了同一个 input，导致 autoClearSearchValue: false 用例变成伪通过。
建议修改
- fireEvent.keyDown(input, { key: 'Escape' });
+ fireEvent.keyDown(container.querySelector('.rc-tabs-nav-more'), {
+ key: 'Escape',
+ keyCode: KeyCode.ESC,
+ charCode: KeyCode.ESC,
+ });📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // 关闭下拉再打开，验证 autoClearSearchValue: false 时搜索值保留 | |
| fireEvent.keyDown(input, { key: 'Escape' }); | |
| act(() => { | |
| jest.runAllTimers(); | |
| }); | |
| fireEvent.mouseEnter(container.querySelector('.rc-tabs-nav-more')); | |
| act(() => { | |
| jest.runAllTimers(); | |
| }); | |
| const input2 = document.querySelector('.rc-tabs-dropdown input') as HTMLInputElement; | |
| expect(input2.value).toEqual('u'); | |
| // 关闭下拉再打开，验证 autoClearSearchValue: false 时搜索值保留 | |
| fireEvent.keyDown(container.querySelector('.rc-tabs-nav-more'), { | |
| key: 'Escape', | |
| keyCode: KeyCode.ESC, | |
| charCode: KeyCode.ESC, | |
| }); | |
| act(() => { | |
| jest.runAllTimers(); | |
| }); | |
| fireEvent.mouseEnter(container.querySelector('.rc-tabs-nav-more')); | |
| act(() => { | |
| jest.runAllTimers(); | |
| }); | |
| const input2 = document.querySelector('.rc-tabs-dropdown input') as HTMLInputElement; | |
| expect(input2.value).toEqual('u'); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@tests/overflow.test.tsx` around lines 740 - 751, The “close and reopen” test
is using Escape on the search input, but OperationNode’s input onKeyDown does
not handle that path; the real close action is on the .rc-tabs-nav-more trigger.
Update the autoClearSearchValue: false test to close the dropdown by interacting
with the more button in TabNavList/OperationNode, then reopen it and assert the
input still contains the search value. Use the existing OperationNode dropdown
and input selectors so the test covers the actual close/reopen flow instead of
reusing the same open input.
1 participant
概述
为 Tabs 组件的更多下拉菜单添加搜索功能，类似于 Select 组件的 showSearch 特性。
相关 Issue
ant-design/ant-design#30719
改动内容
使用方法
测试结果
全部 76 个测试通过。
Summary by CodeRabbit
icon、占位符、受控/非受控searchValue、onSearch回调与autoClearSearchValue（可保留或自动清空）。MoreProps的showSearch配置说明与字段列表。